<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' title="广告账户" :visible.sync="dialogVisible" @close="resetForm()" width="703px">
        <AddUserGroup ref="adverRef" @getAdverData="getAdverData" />
        <div>
            <div class="hascheck_box flexbox flexcenter flexbetween" v-if="hasPlanData.length>0">
                <div class="flexbox flexcenter">
                    <span>已选中{{hasPlanData.length}}项</span>
                    <el-link :underline="false" style="margin-left:20px" @click="batchDeletPlan">删除</el-link>
                </div>
                <div class="has_close"><i class="el-icon-close" @click="closeHasPlanCheck"></i></div>
            </div>
            <div class="flexbox flexcenter flexbetween" v-else>
                <span class="font_14 color_01">已添加广告账户</span>
                <el-button plain icon="el-icon-circle-plus-outline" class="plain_blue" size="small" @click="addStrategyAdver">添加广告账户</el-button>
            </div>
            <el-table :data="tableData" class="com_table" height="400px" style="margin-top:16px" ref="planRef" :row-key="(row)=>{ return row.id}" @selection-change="selectGroup">
                <div slot="empty" class="flexbox flexcenter flexcolumn flexjust" style="height:300px">
                    <img src="../../assets/img/null_icon.svg" alt="">
                    <div class="font_13 color_03">暂无数据，请添加广告账户</div>
                </div>
                <el-table-column type="selection" width="55" align="center" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="advertiser_id" label="广告账户 ID" width="170">
                </el-table-column>
                <el-table-column prop="name" label="广告账户名称">
                </el-table-column>
                <el-table-column prop="user_id" label="预警提醒人" width="200">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.user_id" class="user_select" multiple collapse-tags filterable placeholder="请选择">
                            <el-option v-for="item in remindList" :label="item.nickname" :value="item.id" :key="item.id"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="80">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletAdverList(scope.$index)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" class="el-button-width" @click="resetForm()">取 消</el-button>
            <el-button size="small" type="primary" class="el-button-width" @click="saveUser()">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
import AddUserGroup from "./AddUserGroup";
export default {
    name: "",
    data() {
        return {
            remindList:[],
            dialogVisible: false,
            hasPlanData: [],
            tableData: [],
        };
    },
    created() {
        
    },
    methods: {
        // 获取提醒人
        async getRemindList() {
            this.loading = true
            const { data: res } = await this.$http.post(
                "/adminapi/company/hzOptimizerList"
            );
            if (res.code !== 200) {
                this.loading = false
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false
                this.remindList = res.data
            }
        },

        
        // 添加账号
        addStrategyAdver() {
            this.$refs.adverRef.dialogVisible = true;
            this.$refs.adverRef.planData = this.tableData;
            this.$refs.adverRef.getDataList(1);
        },
        getAdverData(data) {
            this.tableData = data;
            // this.$emit("getAdverData", this.tableData);
        },

        // 数组去重
        arrRepeat(old,news){
            let k = {}
            let arr = [...old,...news]
            let newsArr = []
            newsArr = arr.reduce(function(cur,next){
                k[next.advertiser_id]?"":k[next.advertiser_id] = true && cur.push(next)
                return cur
            },[])
            return newsArr
        },

        // 删除账号
        deletAdverList(index) {
            this.tableData.splice(index, 1);
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            // this.$emit("getAdverData", this.tableData);
        },

        // 选择账号
        selectGroup(v) {
            this.hasPlanData = v;
        },

        // 关闭已选账号
        closeHasPlanCheck() {
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
        },

        // 批量删除账号
        batchDeletPlan() {
            for (let i in this.hasPlanData) {
                for (let a in this.tableData) {
                    if (this.hasPlanData[i].id == this.tableData[a].id) {
                        this.tableData.splice(a, 1);
                    }
                }
            }
            this.hasPlanData = [];
            this.$refs.planRef.clearSelection();
            // this.$emit("getAdverData", this.tableData);
        },

        // 保存
        saveUser(){
            let is_true = false
            for(let i in this.tableData){
                if(this.tableData[i].user_id.length<=0){
                    is_true = true
                    break;
                }
            }
            if(is_true){
                this.$message.error('请选择预警提醒人！');
                return;
            }else{
                this.$emit("getAdverData", this.tableData);
                this.dialogVisible = false;
            }
        },

        // 关闭重置表单
        resetForm() {
            this.dialogVisible = false;
        },
    },
    components: {
        AddUserGroup,
    },
};
</script>


<style scoped>
.hascheck_box {
    height: 30px;
    border: 1px solid #4475ff;
    background: #f6f8ff;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 14px;
    color: #616c85;
}
.has_close {
    cursor: pointer;
    padding: 3px;
    border-radius: 2px;
}
.has_close:hover {
    background: #eeeff0;
}
</style>

<style>
.user_select .el-input__suffix{
    /* right: 0px; */
}
.user_select .el-input__inner{
    border-style: dashed;
}
.user_select .el-select__tags{
    max-width: 100% !important;
}
</style>
